<template>
  <div class="search-wrapper">
    <div class="head-box">
    <div class="search-input-wrapper">
      <var-icon name="magnify" class="icon" />
      <input
        type="text"
        placeholder="请输入关键词搜索"
        class="input"
        v-model="valueRef"
        @blur="inputBlur"
        @focus="inputFocus"
        ref="inputRef"
      />
      <var-icon
        name="window-close"
        class="close-icon"
        @click="valueRef = ''"
        :style="{ opacity: valueRef !== '' && isFocusRef ? '1' : '0' }"
      />
    </div>
    <span class="cancle" @click="router.back()">取消</span>
    </div>
    <div class="list-content" v-if="listCompountd && listCompountd.length && !loadingRef">
      <MobileCard
        v-for="(item, index) in listCompountd"
        :key="item.id"
        :source="item"
        parent-com="meno"
        @click="openPage(item)"
        class="mobile-card"
      >
        <template v-slot="{ row }">
          <div class="cont">
            <h5>{{ row?.title || row?.name }}</h5>
            <var-ellipsis :line-clamp="4" :tooltip="false" class="text">
              {{ row?.describe || '' }}
            </var-ellipsis>
            <div class="creat-time">
              <span>{{ row.createTime }}</span>
            </div>
          </div>
        </template>
      </MobileCard>
    </div>
    <Empty description="暂无搜索匹配的结果！" v-else-if="!listCompountd.length && !loadingRef"></Empty>
    <div class="loading" v-else-if="loadingRef">
        <var-loading type="wave" color="var(--system-primary-color)"  />
    </div>
  </div>
</template>
<script setup name="Search">
import { ref, inject, watch, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { debounce } from 'lodash';
import useSymbols from '../../compostions/useSymbols.js';
import MobileCard from '../../components/MobileCard/index.vue';
import Empty from './../../components/Empty/index.vue'

const {
  searchInfoList,
  searchListReadonly,
  searchMenoListReadonly,
  searchMenoList,
} = inject(useSymbols);

const router = useRouter();
const openPage = ({ tag, url = '' }) => {
  if (tag === '书签') {
    window.open(url);
  }
};

onMounted(() => {
  inputRef?.value?.focus()
  search();
})

const inputRef = ref(null);
const valueRef = ref('');
const isFocusRef = ref(false);
const loadingRef = ref(false);

const inputFocus = () => {
  isFocusRef.value = true;
};
const inputBlur = () => {
  isFocusRef.value = false;
};

watch(valueRef, (newValue) => {
    loadingRef.value = true;
  search();
});

const search = () => {
  searchInfoList(valueRef.value);
  searchMenoList(valueRef.value);
};

const listCompountd = computed(() => {
  const newInfoList = searchListReadonly.value.map((item) => ({
    ...item,
    tag: '书签',
  }));
  const newMenoList = searchMenoListReadonly.value.map((item) => ({
    ...item,
    tag: '便签',
  }));
  loadingRef.value = false;
  return [...newInfoList, ...newMenoList];
});
</script>
<style scoped lang="less">
.search-wrapper {
//   padding: 0.5rem;
  background-color: #f1f1f1;
  height: 100vh;
  box-sizing: border-box;
 
  .head-box{
    display: grid;
  grid-template-columns: 1fr 3.5rem;
  background-color: var(--system-primary-color);
  padding: 0.6rem 0.5rem 0.4rem 0.5rem;
    .cancle{
        color: #fff;
        font-size: .9rem;
        line-height: 2.2rem;
        width: 100%;
        display: block;
        text-align: center;
    }
  .search-input-wrapper {
    @searchBoxHeight: 2rem;
    box-sizing: border-box;
    height: @searchBoxHeight;
    width: 100%;
    border-radius: 999px;
    background-color: #fff;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.8rem 1fr 1.4rem ;
    align-items: center;
    .icon {
      font-size: 1.2rem;
      color: #848484;
      text-align: center;
    }
    .input {
      background-color: rgba(0, 0, 0, 0);
      font-size: 0.8rem;
      line-height: calc(@searchBoxHeight - 2px);
      margin: 0;
      padding: 0;
    }
    .close-icon {
      font-size: 0.6rem;
      width: 0.9rem;
      height: 0.9rem;
      border-radius: 50%;
      color: #444;
      background-color: #dfdfdf;
    }
    .btn {
      width: 100%;
      height: 1.7rem;
      line-height: 1.7rem;
      border-radius: 999px;
      background-color: var(--system-primary-color);
      color: #fff;
      text-align: center;
      box-sizing: border-box;
      font-size: 0.8rem;
    }
  }
}
  .list-content {
    height: calc(100% - 4rem);
    width: 100%;
    margin-top: 0.6rem;
    overflow-y: auto;
    padding: 0 .5rem;
    box-sizing: border-box;
    .mobile-card {
      display: grid;
      grid-template-columns: 1fr 14rem;
      margin-bottom: .5rem;
      .cont {
        background-color: #fff;
        padding: 0.5rem;
        box-sizing: border-box;
        h5 {
          margin: 0;
          padding: 0;
          padding-top: 0.5rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .text {
          height: 4.2rem;
          width: 100%;
          font-size: 0.82rem;
          line-height: 0.95rem;
          color: #888;
          display: block;
          word-break: break-all;
        }

        .creat-time {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            color: #ababab;
            font-size: 0.8rem;
          }
        }
      }
    }
  }
  .loading{
    height: calc(100% - 3rem);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
}
</style>
